<template>
  <n-drawer class="member-select" v-model:show="active" width="70%">
    <n-drawer-content body-style="--n-body-padding:0" closable>
      <template #header>
        <div class="my-title--primary">选择会员</div>
      </template>
      <div class="member-select_content-header">
        <input type="text" placeholder="请输入会员姓名/电话/识别码">
        <button>
          <span class="iconfont icon-zhuce"></span>
          注册会员
        </button>
      </div>
      <div class="member-select_content-list">
        <n-data-table :striped="true" :columns="columns" :data="data" :max-height="720" style="--n-font-size: 24px;"/>
      </div>
      <template #footer>
        <div class="member-select_footer">
          <n-pagination class="member-select_footer--pagination" v-model:page="pagination.page"
            v-model:page-size="pagination.pageSize" :page-count="100"
            show-size-picker :page-sizes="pagination.pageSizes" >
            <template #prev>
              <div>上一页</div>
            </template>
            <template #next>
              <div>下一页</div>
            </template>
          </n-pagination>
        </div>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
  import {
    h,
    inject,
    reactive
  } from "vue";
  import {
    NButton
  } from "naive-ui";
  const active = inject('memberSelectDrawerActive')

  const columns = [{
      title: '会员姓名',
      key: 'name'
    },
    {
      title: '会员电话',
      key: 'mobile'
    },
    {
      title: '会员类型',
      key: 'type'
    },
    {
      title: '所属店铺',
      key: 'shop',
      ellipsis: {
        tooltip: true
      }
    },
    {
      title: '操作',
      key: 'actions',
      render(row) {
        return h(
          NButton, {
            size: 'small',
            style: '--n-font-size: 24px;',
            onClick: () => {
              console.log(row);
            }
          }, {
            default: () => "选择会员"
          }
        )
      }
    }
  ]
  const data = reactive([{
      key: 0,
      name: 'John Brown',
      mobile: 32,
      type: '至尊会员',
      shop: 'New York No. 1 Lake Park'
    }
  ])

  const pagination = reactive({
    page: 1,
    pageSize: 10,
    pageSizes: [10, 15, 20],
    onChange: (page) => {
      pagination.page = page
    },
    onUpdatePageSize: (pageSize) => {
      pagination.pageSize = pageSize
      pagination.page = 1
    }
  })
</script>

<style lang="less">
  .member-select {
    &_content-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 30px;

      >input {
        width: 380px;
        height: 60px;
        padding: 0 20px;
        font-size: 24px;
        font-weight: 500;
        color: #999;
        background: #FFF;
        border: 1px solid #E5E5E5;
        border-radius: 5px;
      }

      >button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 168px;
        height: 60px;
        font-size: 24px;
        font-weight: 400;
        color: #FFF;
        text-align: center;
        line-height: 60px;
        background: #2C8CF0;
        border-radius: 5px;

        >span {
          font-size: 30px;
        }
      }
    }

    &_content-list {
      margin: 0 30px;
    }

    &_footer {
      width: 100%;
      display: flex;
    }
  }
</style>